<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> <!--演示了如何设置文本的垂直对齐图像-->
<style>
img.top {vertical-align:text-top;}/*设置元素的垂直对齐*/
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>